<template>
  <div id="data-view">
    <!-- <div class="header"><TopHeader /></div> -->

    <div class="content">
      <el-row style="height: 10%">
        <el-col :span="24">
          <TopHeader />
        </el-col>
      </el-row>
      <el-row style="height: 90%">
        <!--2025年度订单汇总-->
        <el-col :span="8">
          <el-row style="height: 20%">
            <R1Col1 />
          </el-row>
          <el-row style="height: 50%">
            <R1Col2 />
          </el-row>
          <el-row style="height: 30%">
            <R1Col3 />
          </el-row>
        </el-col>
        <!--本月订单总览-->
        <el-col :span="8">
          <el-row style="height: 16%">
            <R2Col1></R2Col1>
          </el-row>
          <el-row style="height: 40%">
            <!-- <R2Col2></R2Col2> -->
          </el-row>
          <el-row style="height: 44%">
            <R2Col3></R2Col3>
          </el-row>
        </el-col>
        <!--本月报废统计-->
        <el-col :span="8">
          <el-row style="height: 30%"><R3Col1> </R3Col1></el-row>
          <el-row style="height: 40%"><R3Col2> </R3Col2></el-row>
          <el-row style="height: 30%"><R3Col3> </R3Col3></el-row>
        </el-col>
      </el-row>

      <!-- <div class="row1">
        <div class="row1-col1">
          <R1Col1 />
        </div>
        <div class="row1-col2"><R1Col2 /></div>
        <div class="row1-col3"><R1Col3 /></div>
      </div>
      <div class="row2">
        <div class="row2-col1"><R2Col1> </R2Col1></div>
        <div class="row2-col2"><R2Col2> </R2Col2></div>
        <div class="row2-col3"><R2Col3> </R2Col3></div>
      </div>
      <div class="row3">
        <div class="row3-col1"><R3Col1> </R3Col1></div>
        <div class="row3-col2"><R3Col2> </R3Col2></div>
        <div class="row3-col3"><R3Col3> </R3Col3></div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { Decoration5 } from "@kjgl77/datav-vue3";
import TopHeader from "./header/topHeader.vue";
import { BorderBox1 } from "@kjgl77/datav-vue3";
import R1Col1 from "./row1/col1.vue";
import R1Col2 from "./row1/col2.vue";
import R1Col3 from "./row1/col3.vue";
import R1Col4 from "./row1/col3.vue";
import R2Col1 from "./row2/col1.vue";
import R2Col2 from "./row2/col2.vue";
import R2Col3 from "./row2/col3.vue";
import R3Col1 from "./row3/col1.vue";
import R3Col2 from "./row3/col2.vue";
import R3Col3 from "./row3/col3.vue";
</script>
<style scoped lang="less">
// .el-row {
//   // display: flex;
//   // flex-wrap: wrap;
//   height: 30%;
// }
#data-view {
  width: 100%;
  height: 100%;
  color: green;
  background-image: url("./img/bg1.png");
  background-size: cover;
  background-attachment: fixed;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  // .header {
  //   height: 10%;
  //   width: 100%;
  //   // display: flex;
  //   // justify-content: center; /* 水平居中 */
  //   // align-items: center;
  //   // color: white;
  // }
  .content {
    height: 100%;
    // width: 100%;
    // height: 600px;
    color: white;
  }
}

.row1 {
  flex: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  margin-left: 20px;
  margin-top: 20px;
  .row1-col1 {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
  .row1-col2 {
    flex: 1;
    width: 70%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
  .row1-col3 {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
  .row1-col4 {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
}
.row2 {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .row2-col1 {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
  .row2-col2 {
    flex: 1;
    width: 160%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
  .row2-col3 {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
}
.row3 {
  flex: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  margin-right: 20px;
  margin-top: 20px;
  .row3-col1 {
    flex: 0.3;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
  .row3-col2 {
    flex: 0.4;
    width: 70%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
  .row3-col3 {
    flex: 0.3;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
  }
}
</style>
